/**
 * 左下的齿轮 / 右下的三角箭头, 含六角形底
 */

import { calc, cubicOut } from '../../../common/animation';
import { Sprite, ZRenderComp } from '../../../common/component/zrComp';
import paths from '../../compute/v4/paths';
import events from './events';
import layout from './layout4';

const playPath = 'M-30 -60v120l90 -60z' // 中间的三角 (三角形 x 差 120)
+ 'M-150 -60v120l90 -60z' // 左 1
+ 'M-270 -60v120l90 -60z' // 左 2
+ 'M90 -60v120l90 -60z'; // 右 1

/**
 * 
 * @param {number} w width
 * @param {number} h height
 * @param {number} o offset
 */
function buildHexagonPath(w, h, o) {
	const w2 = w / 2, h2 = h / 2;
	return `M0-${h2}h${w2-o}l${o},${h2}l-${o},${h2}h-${w-2*o}l-${o}-${h2}l${o}-${h2}Z`;
}

/**
 * zlevel = 20, 边框+底
 * zlevel = 30, 齿轮
 */
class Gear extends ZRenderComp {
	// 齿轮是否在转
	gearRotating = false;
	lastRotating = null;
	mainGear = {
		/** @type {Sprite} */ sp : null,
		rotatingX : -8.1,
		rotatingY : 6.4,
		stoppedX : -11,
		stoppedY : 7,
	};
	subGear = {
		/** @type {Sprite} */ sp : null,
		rotatingX : 8.1,
		rotatingY : -6.4,
		stoppedX : 11,
		stoppedY : -7,
	};

	constructor(args) {
		super(args.parent);

		const l = layout.titleGearFrame;
		this.useParentZRenderInstance(l.srcX, l.srcY);

		this.on(events.TIMER_PLAY, this.startRotating.bind(this));
		this.on(events.TIMER_RESET, this.finishRotating.bind(this));
		this.on(events.TIMER_PAUSE, this.finishRotating.bind(this));
		this.on(events.TIMER_STOP, this.finishRotating.bind(this));
	}

	init() {
		const {width:w, height:h, offset:o} = layout.titleGearFrame;
		let hexagonPath = buildHexagonPath(w, h, o);

		this.spBg = this.createPathFromString(hexagonPath)
			.shadow(layout.colors.strokeNormal, 12)
			.stroke(layout.colors.strokeNormal, 2)
			.fill(layout.colors.strokeBg)
			.z(20, 13)
			.build();

		// 再画图案
		this.mainGear.sp = this.createPathFromString(paths.gear)
			.fill(layout.colors.strokeNormal)
			.shadow(layout.colors.strokeNormal, 20)
			.position(this.mainGear.stoppedX, this.mainGear.stoppedY)
			.scale(0.026784)
			.anchor(...paths.gearAnchor)
			.z(30, 10)
			.build();
		this.subGear.sp = this.createPathFromString(paths.gear)
			.fill(layout.colors.strokeNormal)
			.shadow(layout.colors.strokeNormal, 20)
			.position(this.subGear.stoppedX, this.subGear.stoppedY)
			.scale(0.026784)
			.anchor(...paths.gearAnchor)
			.z(30, 10)
			.build();
	}

	tick(now) {
		super.tick(now);
		if (this.gearRotating) {
			this.makeDirty(false);
		}
	}

	paint() {
		if (this.gearRotating) {
			const progress = Date.now() % 1000 / 1000 * Math.PI;
			this.mainGear.sp.rotation(progress);
			this.subGear.sp.rotation(-progress);
		}
		if (this.gearRotating != this.lastRotating) {
			this.lastRotating = this.gearRotating;
			const {mainGear: m, subGear: s} = this;
			this.mainGear.sp.moveTo(
				this.gearRotating ? m.rotatingX : m.stoppedX,
				this.gearRotating ? m.rotatingY : m.stoppedY,
			);
			this.subGear.sp.moveTo(
				this.gearRotating ? s.rotatingX : s.stoppedX,
				this.gearRotating ? s.rotatingY : s.stoppedY,
			);
		}
	}

	startRotating() {
		this.gearRotating = true;
		this.createAnimation('pos')
			.whenUpdated(p => this.putGearPosition(p.value))
			.update()
			.when(0, 0)
			.when(300, 1).easing(cubicOut)
			.commit();
	}

	finishRotating() {
		this.gearRotating = false;
		this.createAnimation('pos')
			.whenUpdated(p => this.putGearPosition(p.value))
			.update()
			.when(0, 1)
			.when(300, 0).easing(cubicOut)
			.commit();
	}

	putGearPosition(delta) {
		const m = this.mainGear;
		m.sp.moveTo(calc(m.stoppedX, m.rotatingX, delta), calc(m.stoppedY, m.rotatingY, delta));
		const s = this.subGear;
		s.sp.moveTo(calc(s.stoppedX, s.rotatingX, delta), calc(s.stoppedY, s.rotatingY, delta));
	}
}

class Sign extends ZRenderComp {
	// 外框是否移动. 如果在移动中, 里面的绘制内容也要跟着计算位置
	moving = false;
	lastMoving = null;

	constructor(args) {
		super(args.parent);

		const l = layout.titleSignFrame;
		this.useParentZRenderInstance(l.srcX, l.srcY);

		this.on(events.TIMER_PLAY, this.startMoving.bind(this));
		this.on(events.TIMER_RESET, this.stopMoving.bind(this));
		this.on(events.TIMER_PAUSE, this.stopMoving.bind(this));
		this.on(events.TIMER_STOP, this.stopMoving.bind(this));
	}

	init() {
		const {width:w, height:h, offset:o} = layout.titleSignFrame;
		let hexagonPath = buildHexagonPath(w, h, o);

		this.spBg = this.createPathFromString(hexagonPath)
			.shadow(layout.colors.strokeNormal, 12)
			.stroke(layout.colors.strokeNormal, 2)
			.fill(layout.colors.strokeBg)
			.z(20, 13)
			.build();

		this.spMain = this.createPathFromString(playPath)
			.fill(layout.colors.strokeNormal)
			.shadow(layout.colors.strokeNormal, 20)
			.scale(0.2)
			.z(30, 10)
			.build();
		this.spClip = this.createPathFromString(hexagonPath)
			.defineAsClip()
			.scale(5)
			.build();
		this.spMain.setClipPath(this.spClip);
	}

	startMoving() {
		this.moving = true;
	}

	stopMoving() {
		this.moving = false;
	}

	tick(now) {
		super.tick(now);
		if (this.moving) {
			this.lastMoving = true;
			this.makeDirty(false);
		} else if (this.lastMoving) {
			this.lastMoving = false;
			this.makeDirty(false);
		}
	}

	paint() {
		if (this.moving) {
			const progress = Date.now() % 1000 / 1000;
			const displacement = layout.titleSignFrame.height / 2 * progress;
			this.spMain.moveTo(displacement + 0.5);
			this.spClip.moveTo(-displacement * 5 - 2.5); // 因为 spMain 的 scale=0.2, 所以它的参数要x5
		} else {
			this.spMain.moveTo(0);
			this.spClip.moveTo(0);
		}
	}
}

export {
	Gear, Sign
};
